<script setup>
import { Edit,Delete,Key } from '@element-plus/icons-vue';
import { ref } from 'vue'
import { ElMessage ,ElMessageBox} from 'element-plus';
import {getUser,addUser,updateUser,delUser} from '@/api/gongs.js'
// import {useKuYiStore} from '@/stores'

const HouseList = ref([]) //宾馆信息列表
const formModel=ref([])  //弹出框的数据 准备提交的数据
const total=ref(0) //总条数
const loading=ref(false) //loading状态
const dialogVisible=ref(false)// Dialog弹出框的状态
const isDialog=ref(false)// 管理弹出框是否是添加和编辑的
const formRef=ref(null)    
const isUpDate=ref(false)
const isPassword=ref(false) //修改密码弹出框
const formPassword=ref(null)


// 表单规则
const rules = {
    username: [
        { required: true, message: '请输入用户名称', trigger: 'blur' },
        { min: 3, max: 15, message: '用户名称长度应在3到15个字符之间', trigger: 'blur' }
    ],
    password: [
        { required: true, message: '请输入用户密码', trigger: 'blur' },
        { min: 6, message: '密码长度不能少于6个字符', trigger: 'blur' }
    ],
    role: [
        { required: true, message: '请选择用户权限', trigger: 'change' },
        { type: 'number', min: 1, max: 50, message: '权限值应在1到50之间', trigger: 'change' }
    ],
    remark:[
        { required: true, message: '请输入修改信息', trigger: 'blur' },
        { min: 2, max: 15, message: '修改信息长度应在2到15个字符之间', trigger: 'blur' }
    ]
};


// 确定表单
const onSubmit=async()=>{
    await formRef.value.validate() //预校验
    // 根据 isDialog 的值判断是添加还是编辑
    if (!isDialog.value) {
        // 添加逻辑
        const res = await addUser(formModel.value)
        ElMessage.success('添加成功！')
        getArticleList()

    } else {
        console.log(formModel.value);
        // 编辑逻辑
        const res = await updateUser(formModel.value)
        ElMessage.success('修改成功！')
        getArticleList()
    }
  dialogVisible.value = false; // 关闭对话框
}

// 定期请求参数对象
const params=ref({
    action: 'list',
    page: 1,   //第几页
    perPage:10 //每页数量
})

// 根据后端代码渲染单元管理数据
const getArticleList = async () =>{
    try{
        loading.value = true //开启loading效果
        const res = await getUser(params.value)
        console.log('接口返回的数据',res.data.data);
        HouseList.value = res.data.data
        total.value = res.data.data.length
        loading.value = false //关闭loading效果
    }catch(err){
        console.log(err);
    }
}
getArticleList()

// 处理分页逻辑
const handleSizeChange=(size)=>{
    console.log('当前每页条数',size);
    // 如果每页条数发生变化 就要把当前跳到第一页；并且每页条数设置成要变成的条数
    params.value.page=1
    params.value.perPage=size
    // 重新渲染
    getArticleList()
}

// 分页
const handleCurrentChange=(page)=>{
//     console.log('页码变化了',page);
//     params.value.page=page
//    // 重新渲染
//    getArticleList()
    params.value.page = parseInt(page, 10); // 确保转换为整数
    getArticleList(); // 重新加载数据
}

// 打开文章的对话框，进行新增加
const onAddAritcle=()=>{
    // 管理弹出框是否是添加和编辑的
    isDialog.value=false
    // 打开弹出框
    dialogVisible.value=true
    // 这是添加房屋要进行清空数据原
    formModel.value=[]
}

// 编辑楼宇 这里要根据后台是不是有数据如果有数据就是修改
const onEditArticle=(row)=>{
    console.log(row);
    isUpDate.value=true
    // 管理弹出框是否是添加和编辑的
    isDialog.value=true
    dialogVisible.value=true
    formModel.value = { ...row}; // 设置表单数据为当前行数据的副本
}

// 删除单元的数据
const onDeleteArticle= async (row)=>{
    // 删除逻辑
    ElMessageBox.confirm( '您是否要删除该用户','提示！',{confirmButtonText: '确认',cancelButtonText: '取消',type: 'warning',})
    .then(async() => {
        await delUser(row.id)
        ElMessage.success('删除成功！')
        getArticleList()
    })
}

// dialog关闭时触发的函数
const guanbi=()=>{
    isUpDate.value=false
}

// 修改密码弹出框
const checkPassowrd=(row)=>{
    isPassword.value=true
    // formModel.value=row
}
// 提交修改密码
const getPassword = async ()=>{
    await formPassword.value.validate() //预校验
}
</script>


<template>
      <page-container title="">
        
        <template #extra>
            <el-button type="primary" @click="onAddAritcle">新增用户</el-button>
        </template>

        <!-- 表格区域 articleList = 数据源  -->
        <el-table :data="HouseList" v-loading="loading">
            <el-table-column type="index" width="300" label="编号" />

            <el-table-column label="用户名" prop="roomnumber" >
                <template #default="{row}">
                    {{ row.username }}
                </template>
            </el-table-column>

            <el-table-column label="权限等级" prop="area"  >
                <template #default="{row}">
                    {{ row.role }}
                </template>
            </el-table-column>
            
            <el-table-column label="操作"  width="190">
                <template #default="{row}">
                    <el-button circle type="primary" plain :icon="Edit" @click="onEditArticle(row)"></el-button>
                    <!-- 更新密码 -->
                    <!-- <el-button circle type="primary" plain :icon="Key" @click="checkPassowrd(row)"></el-button>  -->
                    <el-button circle type="danger" plain :icon="Delete" @click="onDeleteArticle(row)"></el-button>
                </template>
            </el-table-column>

        </el-table>

        <!-- 分页区域 -->
        <el-pagination
            v-model:current-page="params.page"  
            v-model:page-size="params.perPage"
            :page-sizes="[1, 2, 3, 4]"
             :disabled="false"
            :background="true"
            layout="total,  prev, pager, next, jumper"
            :total="total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            style="margin-top: 20px; justify-content: flex-end;"
        />
        </page-container>

    <!-- 弹出框 -->
    <el-dialog  @close="guanbi" v-model="dialogVisible" :title="!isDialog ? '添加用户':'编辑用户'" width="30%">
        <el-form :model="formModel" :rules="rules" ref="formRef"  label-width="120px" lablabel-position="left">

            <el-form-item label="用户名称" prop="username">
                <el-input v-model="formModel.username" placeholder="请输入新用户名称"></el-input>
            </el-form-item>

            <el-form-item label="用户密码" prop="password" v-if="!isUpDate">
                <el-input v-model="formModel.password" placeholder="请输入用户密码" type="password"></el-input>
            </el-form-item>

            <el-form-item label="用户权限" prop="role">
                <el-input-number v-model="formModel.role" :min="1" :max="50"/>
            </el-form-item>

            <el-form-item label="更新信息" prop="remark" v-if="isUpDate">
                <el-input v-model="formModel.remark" placeholder="请输入更新信息"></el-input>
            </el-form-item>
            
            <!-- 并不是必选是可选的 -->
            <el-form-item label="新密码(可选)" v-if="isUpDate">
                <el-input v-model="formModel.rePasswd" placeholder="请输入新密码" type="password"></el-input>
            </el-form-item>

        </el-form>

        <template #footer>
            <span class="dialog-footer">
                <el-button @click="dialogVisible = false">取消</el-button>
                <el-button type="primary" @click="onSubmit">确认</el-button>
            </span>
        </template>

    </el-dialog>


    <!-- 密码修改弹出框 -->
    <el-dialog v-model="isPassword" title="更新密码" width="30%">
        <el-form :model="formModel" :rules="rules" ref="formPassword"  label-width="120px">

            <el-form-item label="用户名称" prop="username">
                <el-input v-model="formModel.username" placeholder="请输入新用户名称"></el-input>
            </el-form-item>

            <el-form-item label="新密码" prop="password" >
                <el-input v-model="formModel.password" placeholder="请输入用户密码" type="password"></el-input>
            </el-form-item>

            <el-form-item label="用户权限" prop="role">
                <el-input-number v-model="formModel.role" :min="1" :max="50"/>
            </el-form-item>

            <el-form-item label="更新信息" prop="remark">
                <el-input v-model="formModel.remark" placeholder="请输入更新信息"></el-input>
            </el-form-item>

        </el-form>

        <template #footer>
            <span class="dialog-footer">
                <el-button @click="dialogVisible = false">取消</el-button>
                <el-button type="primary" @click="getPassword">确认</el-button>
            </span>
        </template>

    </el-dialog>
</template>

<style lang="scss" scoped>

</style>